<template>
	<view class="">
		<view class="box" :style="[{height: scroll_h + 'rpx',lineHeight:cell_h + 'rpx'}]">
			<view :style="[scroll_box]">
				<slot name="scrollArr" :scroll_list='scroll_list'></slot>
			</view>
		</view>
	</view>


	<!-- 	
使用
<scrollList :list="List2" >
		<template v-slot:scrollArr="{scroll_list}">
			<view class="flex_btw" v-for="item in scroll_list">
				<view class="flex_x">
					<image class="user_img" src="/static/index/wl.png" mode=""></image>
					<view class="ml10 c6 fs22">拨打 </view>
					<view class="ml10 c23 fs22">天蓝助·23.5km</view>
				</view>
				<view class="c9 fs22">54分钟前</view>
			</view>
		</template>
	</scrollList> -->
</template>

<script>
	/*
	 * @param {list,Array} 滚动数据
	 * @param {time,Number} 滚动间隔时间
	 * @param {scroll_h,Number} 滚动滚动区域高度
	 * @param {cell_h,Number} 每行滚动滚动高度
	 */
	export default {
		name: "scrollList",
		props: {
			list: {
				type: Array,
				default: []
			},
			time: {
				typeof: Number,
				default: 2000
			},
			scroll_h: {
				default: 180
			},
			cell_h: {
				default: 60
			}
		},
		data() {
			return {
				scroll_list: this.list,
				timer: null, //定时器
				scroll_box: {},
			}
		},
		mounted() {
			this.scroll()

		},
		methods: {
			scroll() {
				if (this.scroll_list.length <= 4) {
					return
				}
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					setTimeout(() => {
						this.scroll_list.push(this.scroll_list[0])
						this.scroll_list.shift()
						this.scroll_box = {
							'margin-top': 0,
							'transition': ''
						}
					}, 500)

					this.scroll_box = {
						'margin-top': `-${this.cell_h}rpx`,
						'transition': 'all 0.5s'
					}
				}, this.time)
			},
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		watch: {
			list: {
				handler(news, old) {
					this.scroll_list = news
					this.scroll()
				},
				deep: true
			},

		},
	}
</script>

<style lang="scss">
	.box {
		overflow: hidden;
	}
</style>